<template>
  <div style="width: 100%; height: 100%">
    <div class="dialogTitle">
      <div>缺陷6c类型分布</div>
    </div>
    <div class="model2Content">
      <div id="model2Content1" class="model2Content1" />
      <div class="model2Content2">
        <div class="model2Content2Title">
          <div class>缺陷来源</div>
          <div class>缺陷数量</div>
          <div class>占比</div>
        </div>

        <div v-for="(item,index) in data" :key="index" class="model2Content2Table">
          <div style=" display: flex;
  align-items: center;
  justify-content: center;">
            <div class="icons" :style="{ background: color[index] }" />
            {{ item.name + '检测' }}
          </div>
          <div class>{{ item.value }}</div>
          <div class>{{ item.proportion }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getDefectType_6C } from '@/api/cms/index/index.js'
import echarts from 'echarts'
export default {
  props: {
    typeStatus: {
      type: Number,
      default: 0
    },
    railTypes: {
      type: String,
      default: ''
    },
    deptCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: [

      ],
      color: ['#3254DD', '#48E5E5', '#3CD495', '#2B8EF3', '#DAFF9D'],
      sortType: 'value'

    }
  },
  watch: {
    typeStatus() {
      this.init()
    },
    railTypes() {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getDefectType_6C({
        deptCode: this.deptCode,
        type: this.typeStatus,
        railTypeList: this.railTypes.split(',')
      }).then(res => {
        this.data = res.data
		this.sort('value')
        const myChart2 = echarts.init(document.getElementById('model2Content1'))

        const option = {
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              type: 'pie',
              radius: '60%',
              color: ['#3254DD', '#48E5E5', '#3CD495', '#2B8EF3', '#DAFF9D'],
              data: res.data,
              label: {
                normal: {
                  show: true,
                  formatter: '{b}  ({d}%) ',
                  textStyle: {
                    fontSize: 14,
                    color: 'rgba(255, 255, 255, 0.6)'
                  }
                }
              },
              labelLine: {
                normal: {
                  length: 20 // 改变标示线的长度
                }
              }
            }
          ]
        }
        myChart2.setOption(option)
      })
	},
    sort(type) {
      this.sortType = type
      this.data.sort(this.compare(type))
    },
    compare(attr) {
      return function(a, b) {
        var val1 = a[attr]
        var val2 = b[attr]
        return val2 - val1
      }
    }
  }

}
</script>
<style scoped>
.dialogTitle {
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  line-height: 50px;
  height: 50px;
  padding: 0 20px;
}
.model2Content {
  height: calc(100% - 50px);
}
.model2Content1 {
  height: 55%;
}
.model2Content2 {
  height: 45%;
  padding: 0 20px;
  overflow: auto;
}
.model2Content2Title {
  height: 28px;
  width: 100%;
  background: rgba(0, 117, 255, 0.2);
  font-size: 14px;
  color: #ffffff;
  display: flex;
}
.model2Content2Title div,
.model2Content2Table div {
  width: 33.3%;
  line-height: 28px;
  text-align: center;
}
.model2Content2Table {
  height: 28px;
  width: 100%;
  font-size: 14px;
  color: #ffffff;
  display: flex;
}
.model2Content2Table:nth-child(odd) {
  background-color: rgba(25, 77, 138, 0.2);
}
.icons {
  width: 10px !important;
  height: 10px;
  border-radius: 5px;
  margin-right: 5px;
}

/* 设置滚动条的样式 */
.model2Content2::-webkit-scrollbar {
  width: 4px;
  background: #0f1f56 !important;
}
::-webkit-scrollbar-track {
  background-color: #0f1f56;
}
::-webkit-scrollbar-thumb {
  border: 0 !important;
  background-color: rgba(105, 115, 133, 0.3);
}
</style>
